<template>
  <div style="padding-top: 1.5rem;">
    <div>
      <TopNav title="LevelDistributionPageBAK.wdtd" show_left="true"></TopNav>
      <nut-row type="flex" gutter="10" align="center">
        <nut-col :span="24" style="margin-bottom:0.5rem;">
          <div class="top-group">
            <ul class="group-box">
              <li @click="handleClickSelectDate">
                {{curr_date?curr_date:$t('LevelDistributionPageBAK.rqxz')}}
              </li>
              <li @click="handleClickSelectDate">
                {{ $t('LevelDistributionPageBAK.yjdlrs') }}: {{totalForL1}} {{ $t('LevelDistributionPageBAK.ejdlrs') }}: {{totalForL2}}
              </li>
            </ul>
          </div>
          <ul class="sublist">
            <li v-for="item in data">
              <dl>
                <dt>
                  {{item.username}}
                  <span v-if="item.is_vip">{{item.vip.name}}</span>
                  <span v-else>{{ $t('LevelDistributionPageBAK.pthy') }}</span>
                  💰{{item.balance}}
                </dt>
                <dd v-for="subitem in item.sub">
                  <dl>
                    <dt>
                      {{subitem.username}}
                      <span v-if="subitem.is_vip">{{subitem.vip.name}}</span>
                      <span v-else>{{ $t('LevelDistributionPageBAK.pthy') }}</span>
                      💰{{subitem.balance}}
                    </dt>
                  </dl>
                </dd>
              </dl>
            </li>
          </ul>
          <div v-if="data.length == 0">
            <EmptyBox text="LevelDistributionPageBAK.zwjl"/>
          </div>
        </nut-col>
      </nut-row>
      <nut-datepicker
        :is-visible="showSelectDate"
        type="date"
        title="$t('LevelDistributionPageBAK.qxzrq')"
        startDate="2020-03-01"
        endDate="2020-12-31"
        :defaultValue="todayDate"
        :is-show-chinese="false"
        @close="switchPicker('isVisible')"
        @choose="setChooseValue"
      >
      </nut-datepicker>
    </div>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import TopNav from "../components/TopNav";
import EmptyBox from "../components/EmptyBox";

export default {
  name: 'LevelDistributionPage',
    components: {MainNav,TopNav,EmptyBox},
    data () {
    return {
      msg: 'Hello order',
        loading:true,
        data:[],
        showSelectDate: false,
        curr_date: '',
        todayDate: '',
        totalForL1: 0,
        totalForL2: 0
    }
  },
    methods:{
        shiftTab(index){

        },
        getData(){
            let url = this.$api_url.distributions;
            if(this.curr_date){
                url += "?date="+this.curr_date;
            }
            this.$axios.get(url).then((res)=>{
                this.data = res.data;
                this.totalForL1 = 0;
                this.totalForL2 = 0;
                this.data.forEach((item)=>{
                    this.totalForL1++;
                    if(item.sub){
                        this.totalForL2+=item.sub.length
                    }
                })
            })
        },
        handleClickSelectDate(){
            this.showSelectDate = true;
        },
        switchPicker(){
            this.showSelectDate = false;
        },
        setChooseValue(val){
            this.curr_date = val[3];
            this.getData();
         }
    },
    mounted() {
      this.getData();
    },
    created() {
      let day2 = new Date();
        day2.setTime(day2.getTime());
      let s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
      this.todayDate = s2
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .sublist{
    text-align: left;
    border-radius: 0.1rem;
    background-color: #fff;
    padding-left:0.5rem;
  }
  .sublist dl{
    padding: 0.2rem 0;
    margin: 0;
    margin-top: 0.2rem;
  }
  .top-group{
    padding: 0.2rem 0;
    background: #fff;
    border-radius: 0.1rem;
    padding-left: 0.3rem;
  }
  .group-box{
    width:100%;
    overflow: hidden;
  }
  .group-box li{
    width:100%;
    text-align: left;
    cursor: pointer;
    margin-bottom:0.3rem;
  }
  .group-box li:first-child::after{
    content: ' ⬇️'
  }
</style>
